import React from 'react';
import './index.scss';
import classNames from 'classnames';

const Modal = (props) => {
  let { className, title, visible, children, footer } = props;

  return (
    visible ? 
    <div className={classNames('modal', className)}>
      <div className="modal-mask"></div>
      <div className="modal-content">
        { title && <div className="modal-hd">{title}</div> }
        <div className="modal-bd">
          { children }
        </div>
        <div className="modal-ft">
          { footer }
        </div>
      </div>
    </div>
    : null
  );
}

export default Modal;
